<!--龙虎榜-->
<template>
  <div class="container">
    <div class="headerContainer">
      <div class="left">
        <div class="outter">
          <div class="title"><i class="el-icon-date"></i>选择日期</div>
          <el-date-picker
            popper-class="dataContainer"
            v-model="params.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="dateFn"
            :clearable="false"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="right">
        <div class="chaeck" @click="chaeckFn">查看最新</div>
      </div>
    </div>

    <div v-if="tableData.length > 0">
      <el-table
        :data="tableData"
        style="width: 100%"
        @cell-dblclick="tableClick"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column prop="secCode" label="代码" width="86">
          <div slot-scope="scope" class="yellow">
            {{ scope.row.secCode }}
          </div>
        </el-table-column>
        <el-table-column prop="secName" label="名称" width="100">
          <div slot-scope="scope" class="yellow">
            {{ scope.row.secName }}
          </div>
        </el-table-column>
        <el-table-column prop="chngPct" label="涨跌幅" width="90">
          <div
            slot-scope="scope"
            :style="{ color: colorFn(scope.row.chngPct) }"
          >
            {{ scope.row.chngPct | convert }}
          </div>
        </el-table-column>
        <el-table-column prop="tClose" label="收盘价" width="80">
          <div slot-scope="scope" :style="{ color: colorFn(scope.row.tClose) }">
            {{ scope.row.tClose }}
          </div>
        </el-table-column>
        <el-table-column prop="llTurnover" label="成交金额" width="90">
          <div slot-scope="scope" class="yellow">
            {{ scope.row.llTurnover | convert }}
          </div>
        </el-table-column>
        <el-table-column prop="buyTotal" label="前五买入合计" width="110">
          <div slot-scope="scope" class="blue">
            {{ scope.row.buyTotal | convert }}
          </div>
        </el-table-column>
        <el-table-column prop="sellTotal" label="前五卖出合计" width="110">
          <div slot-scope="scope" class="blue">
            {{ scope.row.sellTotal | convert }}
          </div>
        </el-table-column>
        <el-table-column prop="type" label="上榜原因"> </el-table-column>
        <el-table-column label="详情" type="expand">
          <div slot-scope="scope">
            <sonTable :tableList="scope.row.detail"></sonTable>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="noData">
      <img :src="PIC_URL + '/tlbypcWeb/dragonTiger/wushuju.png'" />
    </div>
  </div>
</template>
<script>
import sonTable from "./sonTable";
import { getTableDate, typeCount } from "../api/index";
import { unitFormat } from "../script/utils";
import hub, { TabChange } from "../script/hub";
import dayjs from "dayjs";
import preDate from "../script/dragonTigerModule";
export default {
  data() {
    return {
      show: false,
      tableData: [],
      params: {
        blockType: "",
        date: new Date(preDate()),
      },
      list: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime();
        },
      },
      typeCount: {
        allNum: 0, //全部
        growthNum: 0, // 创业板
        huNum: 0, // 沪市
        msEnterpriseNum: 0, // 中小板
        scienceNum: 0, //  科创板
        shenNum: 0, // 深市
      },
    };
  },
  filters: {
    // 万亿转换
    convert(val) {
      return unitFormat(val);
    },
  },
  mounted() {
    hub.on(TabChange, (query) => {
      this.params.blockType = query.type;
      this.params.date = query.time;
      this.getTable();
      this.typeCountData();
    });
    this.getTable();
    this.typeCountData();
  },
  methods: {
    // 展示css
    colorFn(val) {
      if (val > 0) {
        return "#ea2827";
      } else {
        return "#31ed24";
      }
    },
    //数据
    async getTable() {
      this.params.date = dayjs(this.params.date).format("YYYY-MM-DD");
      await getTableDate(this.params).then((back) => {
        if (back.status == 1) {
          this.tableData = back.data;
        }
      });
    },
    //原生交互
    tableClick(row, column, cell, event) {
      if (column.resizable) {
        const { secCode, marketCode } = row;
        const type = marketCode == "SS" ? "1" : "0";
        window.prompt(
          "",
          `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${secCode}","type":"龙虎榜"}]`
        );
      }
    },
    async typeCountData() {
      await typeCount({
        date: dayjs(this.params.date).format("YYYY-MM-DD"),
      }).then((back) => {
        if (back.status == 1) {
          this.typeCount = { ...back.data };
        }
      });
    },
    // 最新
    chaeckFn() {
      hub.emit(TabChange, {
        type: this.type,
        time: dayjs(this.params.date).format("YYYY-MM-DD"),
      });
      this.typeCountData();
      this.getTable();
    },
    dateFn(time) {
      this.params.date = dayjs(time).format("YYYY-MM-DD");
      hub.emit(TabChange, {
        type: this.params.blockType,
        time: this.params.date,
      });
      this.typeCountData();
    },
  },
  components: { sonTable },
};
</script>

<style scoped lang="scss">
@import "../style/table.scss";
/deep/.el-input__prefix {
  display: none;
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 150px;
}
</style>
<style lang="scss">
.dataContainer {
  width: 254px;
  height: 274px;
  border: 1px solid #25262a;
  background: #25262a;
  .el-picker-panel__body {
    color: #999;
    font-size: 14px;
  }
  .el-date-picker__header {
    line-height: 22px;
  }
  .el-picker-panel__content {
    width: 224px;
    margin: 15px;
  }
  .el-date-table {
    font-size: 12px;
  }
  .el-date-table th {
    padding: 0 5px;
    border-bottom: none;
    color: #999;
    box-sizing: border-box;
  }
  .el-date-table td {
    padding: 0;
  }
  .el-date-table td.disabled div {
    background: #555555;
  }
  .popper__arrow {
    display: none;
  }
  .el-date-table td span {
    width: 30px;
    height: 30px;
    border-radius: 0;
  }
  .el-date-table td span:hover {
    background-color: #e4e8f1;
  }
  .el-picker-panel__icon-btn {
    color: #97a8be;
    font-size: 14px;
  }
  .el-date-table td.today:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 0.5em solid #20a0ff;
    border-left: 0.5em solid rgba(0, 0, 0, 0);
  }
}
</style>
